<!--
 * @Description: 可视化大屏
 * @Author: zzj
 * @Date: 2021-10-10 18:47:13
 * @LastEditors: zzj
 * @LastEditTime: 2021-10-10 19:03:30
-->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>大屏</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
	<script type="text/javascript" src="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.min.js"></script>
	<script type="text/javascript"
		src="https://webapi.amap.com/maps?v=1.4.15&key=4ce6a51ca3dcb18a098b9a9bb110cf31"></script>

	<style>
		body{
			margin: 0;
			padding: 0;
		}
		#app{
			height: 400px;
			display: flex;
		}
		#app > .left,
		#app > .right{
			flex:1;
			background-color: powderblue;
		}
		#app > .center{
			flex-basis: 600px;
			background-color: plum;
		}
	</style>
</head>
<body>
	<div id="app">
		<div class="left">
			<chart_left/>
		</div>
		<div class="center">
			<chart_center/>
		</div>
		<div class="right"></div>
	</div>
	<script>
		//组件1
		const { Line } = G2Plot;
		let chart_left = {
			template:`
				<div ref="container"></div>
			`,
			data(){
				return{
					dd: [
						{ year: '1991', value: 3 },
						{ year: '1992', value: 4 },
						{ year: '1993', value: 3.5 },
						{ year: '1994', value: 5 },
						{ year: '1995', value: 4.9 },
						{ year: '1996', value: 6 },
						{ year: '1997', value: 7 },
						{ year: '1998', value: 9 },
						{ year: '1999', value: 13 },
					],
					line: null
				}
			},
			methods:{
				renderChart() {
					//获取dom节点
					let dom = this.$refs.container;
					dom.style.height = "400px";
					this.line = new Line(dom, {
						data: this.dd,
						xField: 'year',  //横坐标
						yField: 'value',
					});
					this.line.render();  //渲染
				}
			},
			mounted(){
				this.renderChart();
			},
			beforeDestroy(){

			}
		}
		//组件2
		let chart_center = {
			template:`
			<div ref="container"></div>
			`,
			data: {
				map: null
			},
			mounted() {
				this.renderMap();
			},
			methods: {
				renderMap() {
					let container = this.$refs.container;
					container.style.height = "400px"
					this.map = new AMap.Map(container, {
						zoom: 11,//级别
						center: [112.720988, 37.750227],//中心点坐标
						viewMode: '3D'//使用3D视图
					});
				}
			}
		}
		//组件3

		new Vue({
			el:"#app",
			data:{

			},
			components:{
				'chart_left': chart_left,
				'chart_center': chart_center
			}
		});
	</script>
</body>
</html>